import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { View, Image, Text } from "@tarojs/components-rn";
import PropTypes from 'prop-types';
import { getRuntime } from "../utils/common";
import TabbarStyleSheet from "./Tabbar_styles";

import tab_01 from '../assets/img/tab_01.png';
import tab_01_on from '../assets/img/tab_01_on.png';
import tab_02 from '../assets/img/tab_02.png';
import tab_02_on from '../assets/img/tab_02_on.png';
import tab_03 from '../assets/img/tab_03.png';
import tab_03_on from '../assets/img/tab_03_on.png';
import tab_04 from '../assets/img/tab_04.png';
import tab_04_on from '../assets/img/tab_04_on.png';
import tab_center from '../assets/img/tab_center.png';
import icon_19 from "../assets/img/icon_19.png";
import icon_20 from "../assets/img/icon_20.png";
import icon_21 from "../assets/img/icon_21.png";
import icon_22 from "../assets/img/icon_22.png";
var _styleSheet = TabbarStyleSheet;

function _getClassName() {
  var className = [];
  var args = arguments[0];
  var type = Object.prototype.toString.call(args).slice(8, -1).toLowerCase();

  if (type === 'string') {
    args = args.trim();
    args && className.push(args);
  } else if (type === 'array') {
    args.forEach(function (cls) {
      cls = _getClassName(cls).trim();
      cls && className.push(cls);
    });
  } else if (type === 'object') {
    for (var k in args) {
      k = k.trim();

      if (k && args.hasOwnProperty(k) && args[k]) {
        className.push(k);
      }
    }
  }

  return className.join(' ').trim();
}

function _getStyle(classNameExpression) {
  var className = _getClassName(classNameExpression);

  var classNameArr = className.split(/\s+/);
  var style = [];

  if (classNameArr.length === 1) {
    style.push(_styleSheet[classNameArr[0].trim()]);
  } else {
    classNameArr.forEach(function (cls) {
      style.push(_styleSheet[cls.trim()]);
    });
  }

  return style;
}

let TabBar = class TabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      issueShow: false
    };
  }
  componentWillMount() {
    /// console.log(this.props)
  }
  handelRouter(url = '/pages/index/index') {
    if (url === '/pages/user/index') {
      if (!getRuntime().getToken()) {
        getRuntime().navigateTo('/pages/login/login');
        return;
      }
    }
    getRuntime().navigateTo(url);
  }
  toggleShow() {
    if (!getRuntime().getToken()) {
      getRuntime().navigateTo('/pages/login/login');
      return;
    }
    this.setState({
      issueShow: !this.state.issueShow
    });
  }
  closeIssue(e) {
    e.stopImmediatePropagation();
    this.setState({
      issueShow: false
    });
  }
  openIssue(e) {
    e.stopPropagation();
    this.setState({
      issueShow: true
    });
  }
  render() {
    let currentTab = this.props.currentTab;
    return <View>
        <View style={_styleSheet["tabbar"]}>
          <View onClick={this.handelRouter.bind(this, '/pages/index/index')} style={_styleSheet["tab"]}>
            <Image src={currentTab === 'home' ? tab_01_on : tab_01} style={_styleSheet["tab-icon"]} />
            <View style={_styleSheet["tab-title"]}>首页</View>
          </View>

          <View onClick={this.handelRouter.bind(this, '/pages/dynamic/index')} style={_styleSheet["tab"]}>
            <Image src={currentTab === 'dynamic' ? tab_02_on : tab_02} style={_styleSheet["tab-icon"]} />
            <View style={_styleSheet["tab-title"]}>动态</View>
          </View>

          <View onClick={this.toggleShow.bind(this)} style={_styleSheet["tab"]}>
            <Image src={tab_center} style={_styleSheet["tab-center"]} />
          </View>

          <View onClick={this.handelRouter.bind(this, '/pages/public_welfare/index')} style={_styleSheet["tab"]}>
            <Image src={currentTab === 'publicWelfare' ? tab_03_on : tab_03} style={_styleSheet["tab-icon"]} />
            <View style={_styleSheet["tab-title"]}>公益</View>
          </View>

          <View onClick={this.handelRouter.bind(this, '/pages/user/index')} style={_styleSheet["tab"]}>
            <Image src={currentTab === 'user' ? tab_04_on : tab_04} style={_styleSheet["tab-icon"]} />
            <View style={_styleSheet["tab-title"]}>我的</View>
          </View>
        </View>
        <View toggle={this.toggleShow.bind(this)} style={_styleSheet["tabbar-wrap"]}>
          <View style={_styleSheet["footer-block"]} />
          <View onClick={this.closeIssue.bind(this)} style={_getStyle(this.state.issueShow ? 'issue-wrap issue-wrap-show' : 'issue-wrap')}>
            <View onClick={this.openIssue.bind(this)} style={_styleSheet["content"]}>
              <View onClick={this.handelRouter.bind(this, '/pages/index/demand')} style={_styleSheet["item"]}>
                <Image src={icon_19} style={_styleSheet["item-icon"]} />
                <Text style={_styleSheet["item-title"]}>发布需求</Text>
              </View>
              <View onClick={this.handelRouter.bind(this, '/pages/index/services')} style={_styleSheet["item"]}>
                <Image src={icon_20} style={_styleSheet["item-icon"]} />
                <Text style={_styleSheet["item-title"]}>提供服务</Text>
              </View>
              <View onClick={this.handelRouter.bind(this, '/pages/index/position')} style={_styleSheet["item"]}>
                <Image src={icon_21} style={_styleSheet["item-icon"]} />
                <Text style={_styleSheet["item-title"]}>发布职位</Text>
              </View>
              <View onClick={this.handelRouter.bind(this, '/pages/index/rresume')} style={_styleSheet["item"]}>
                <Image src={icon_22} style={_styleSheet["item-icon"]} />
                <Text style={_styleSheet["item-title"]}>发布简历</Text>
              </View>
            </View>
          </View>
        </View>
      </View>;
  }
};

TabBar.propTypes = {
  currentTab: PropTypes.string
};
TabBar.defaultProps = {
  currentTab: 'home'
};
export default TabBar;